<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { usePlayerStore } from '@renderer/stores/player'
import { storeToRefs } from 'pinia'
import HumbleiconsPlay from '~icons/humbleicons/play'
import HumbleiconsPause from '~icons/humbleicons/pause'
import HumbleiconsSkipBackward from '~icons/humbleicons/skip-backward'
import HumbleiconsSkipForward from '~icons/humbleicons/skip-forward'
import HumbleiconsBars from '~icons/humbleicons/bars'
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
import { formatSeconds } from '@renderer/tools/index'
import { useLyricsStore } from '@renderer/stores/lyrics'

const router = useRouter()
const route = useRoute()
const { isAudioPlay, currentTime, duration } = storeToRefs(usePlayerStore())
const { audioNext, audioPrev, audioPlay, audioPause, setAudioCurrentTime } = usePlayerStore()
const { toggleLyrics } = useLyricsStore()

function doPlayList() {
  const name = 'play-list'
  if (route.name === name) {
    router.back()
  } else {
    router.push({ name })
  }
}
</script>

<template>
  <div class="player">
    <div class="progress-bar" @click.stop>
      <VueSlider
        :model-value="currentTime"
        :dot-size="12"
        :duration="1"
        :height="2"
        :lazy="true"
        :tooltip-formatter="(value: number) => formatSeconds(value)"
        :max="duration"
        @change="setAudioCurrentTime"
      />
    </div>
    <div class="controls" @click="toggleLyrics">
      <div class="playing"></div>
      <div class="middle-control-buttons">
        <div class="container" @click.stop>
          <button @click="audioPrev">
            <HumbleiconsSkipBackward class="svg-icon" />
          </button>
          <button v-if="isAudioPlay" @click="audioPause">
            <HumbleiconsPause class="svg-icon play" />
          </button>
          <button v-else @click="audioPlay()">
            <HumbleiconsPlay class="svg-icon play" />
          </button>
          <button @click="audioNext">
            <HumbleiconsSkipForward class="svg-icon" />
          </button>
        </div>
      </div>
      <div class="right-control-buttons">
        <div class="container" @click.stop>
          <button @click="doPlayList">
            <HumbleiconsBars :class="['svg-icon', { select: route.name === 'play-list' }]" />
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.player {
  height: 64px;
  display: flex;
  flex-direction: column;
  backdrop-filter: saturate(180%) blur(30px);
  background-color: var(--color-navbar-bg);

  .progress-bar {
    width: 100%;
    margin-top: -6px;
    margin-bottom: -6px;

    &:deep(.vue-slider-process) {
      background-color: var(--color-primary) !important;
    }
  }

  .controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 100%;
    padding: 0 5vw;
    padding-bottom: 3px;

    .middle-control-buttons {
      display: flex;
      justify-content: center;

      .container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 8px;

        button {
          .svg-icon {
            width: 24px;
            height: 24px;

            &:deep(path) {
              stroke-width: 2.5;
            }

            &.play {
              width: 32px;
              height: 32px;
            }

            &.select {
              background-color: var(--color-primary);
            }
          }
        }
      }
    }

    .right-control-buttons {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .container {
        button {
          .svg-icon {
            &.select {
              color: var(--color-primary);

              &:deep(path) {
                stroke-width: 3;
              }
            }
          }
        }
      }
    }
  }
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  background: transparent;
  margin: 4px;
  border-radius: 25%;
  transition: 0.2s;
}

button .svg-icon {
  color: var(--color-text);
  height: 20px;
  width: 20px;
}

button:first-child {
  margin-left: 0;
}

button:hover {
  background: var(--color-secondary-bg-for-transparent);
}

button:active {
  transform: scale(0.92);
}
</style>
